<template>
  <view class="package flex-start" style="padding: 15rpx;">
    <image :src="userInfoAll.avatar ? userInfoAll.avatar : iconUser" mode=""></image>
    <view class="direction-start">
      <view>{{ userInfoAll.nickname ? userInfoAll.nickname : '微信用户' }}</view>
      <view style="margin-top: 20rpx;">{{ userInfoAll.mobile ? userInfoAll.mobile : '手机号码' }}</view>
      <view style="margin-top: 5rpx;" v-if="show">
        <text style="font-size: 28rpx;margin-right: 15rpx;">钱包余额</text>
        <text style="font-size: 24rpx;">￥</text>
        <text style="font-size: 36rpx;">{{ userInfoAll.money ? userInfoAll.money : '0.00' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { userInfo } from '@/gql/user';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  import iconUser from '@/static/saleIcon/Icon/mine.png';
  const userInfoAll = ref({});
  const props = defineProps({
    show: {
      type: Boolean,
    },
  })
  function userInfor(id) {
    setTimeout(() => {
      const payload = {
        query: userInfo,
        variables: { driver_id: Number(id) },
      };
      toPublish('ql/driver/getDriverInfo', payload, (obj : any) => {
        const { data } = obj;
        userInfoAll.value = data.driver_info;
      });
    }, 300);
  }
  defineExpose({ userInfor });
</script>

<style scoped lang="less">
  .package {
    image {
      width: 102rpx;
      height: 100rpx;
      box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
      border-radius: 5px;
      margin-right: 20rpx;
    }
  }
</style>